<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>捞海底商城后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red">*</span>商品名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="name" required="" lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red">*</span>详细信息
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="detail" required="" lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red">*</span>商品价格
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="price" required="" lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red"></span>商品标签
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="tag" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red">*</span>库存
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="inventory" required="" lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red">*</span>类别
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="categoryName" required="" lay-verify="required"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="level-name" class="layui-form-label">
                <span class="x-red">*</span>图片Url
            </label>
            <div class="layui-input-inline">
                <input type="text" id="level-name" name="imgUrl" required="" lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="save" lay-submit="">
                保存
            </button>
        </div>
    </form>
    <script>
        const host = 'http://1.116.147.57:8080'
        layui.use(['form', 'layer'], function () {
            $ = layui.jquery;
            var form = layui.form()
                , layer = layui.layer;

            //监听提交
            form.on('submit(save)', function (data) {
                console.log(data);
                //validate the form
                var name = data.field.name;
                var detail = data.field.detail;
                var price = data.field.price;
                var tag = data.field.tag;
                var inventory = data.field.inventory;
                var categoryName = data.field.categoryName;
                var imgUrl = data.field.imgUrl;
                // price and inventory must be number
                if (isNaN(price) || isNaN(inventory)) {
                    layer.msg('价格和库存必须是数字');
                    return false;
                }
                let postData = {
                    name: name,
                    detail: detail,
                    price: price,
                    tag: tag,
                    inventory: inventory,
                    categoryName: categoryName,
                    imgUrl: imgUrl
                }
                axios.post(`${host}/product`, postData, { headers: { 'Authorization': localStorage.getItem('token') } })
                    .then(res => {
                        if (res.data.status == 20) {
                            layer.msg('添加成功');
                        } else {
                            layer.msg('添加失败');
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })


                return false;
            });


        });
    </script>
</body>

</html>